<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" href="/cms/css/font.css">
  <link rel="stylesheet" href="/cms/css/xadmin.css">
  <link rel="stylesheet" href="/cms/layui/css/layui.css">
  <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="form-wrap">

<div class="layui-fluid">
  <div class="layui-row layui-col-space15">

    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">用户信息</div>
        <div class="layui-card-body">
          <form class="layui-form" action="" lay-filter="example">
            <input type="hidden" id="id" name="id" th:value="${user.id}">
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg6">
                <label class="layui-form-label">用户名：</label>
                <div class="layui-input-block">
                  <input type="text" name="username" th:value="${user.name}" lay-verify="required" placeholder="" autocomplete="off"
                         class="layui-input">
                </div>
              </div>
              <div class="layui-col-lg6">
                <label class="layui-form-label">邮箱：</label>
                <div class="layui-input-block">
                  <input type="text" name="email"  th:value="${user.email}"  disabled="disabled" lay-verify="required" placeholder="" autocomplete="off"
                         class="layui-input">
                </div>
              </div>
            </div>


            <div class="layui-col-lg6">
              <label class="layui-form-label">手机号：</label>
              <div class="layui-input-block">
                <input type="text" name="phone"  th:value="${user.phone}" maxlength="11"  lay-verify="required" placeholder="" autocomplete="off"
                       class="layui-input">
              </div>
            </div>




            <div class="layui-col-lg6">
              <label class="layui-form-label">更新密码：</label>
              <div class="layui-input-block">
                <input type="text" name="password" placeholder="不输入则不会进行密码更新" autocomplete="off"
                       class="layui-input">
              </div>
            </div>





            <div class="layui-form-item">
              <label class="layui-form-label">用户图片：</label>

              <div class="layui-input-block" style="float: left">
                <img style="height: 180px;width: 180px;" th:src="'/images/' + ${user.headImg}" alt="">
              </div>
              <input type="hidden" th:value="${user.headImg}" id="headImg" name="headImg">
              <div class="layui-input-block"  style="float: left; margin-top: 80px">
                <button type="button" class="layui-btn" id="test1">
                  <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
              </div>

            </div>



            <div class="layui-form-item">
              <label class="layui-form-label">用户状态：</label>

              <div class="layui-input-block" th:switch="${user.status} == 1">
                <div th:case="true">
                  <input type="radio"  name="status" checked="checked" value="1" title="使用中">
                  <input type="radio" name="status" value="2" title="禁用中">
                </div>

                <div th:case="false">
                  <input type="radio"  name="status"  value="1" title="使用中">
                  <input type="radio" name="status" checked="checked" value="2" title="禁用中">
                </div>

              </div>
            </div>


            <div class="layui-form-item">
              <label class="layui-form-label">用户角色：</label>

              <div class="layui-input-block" th:switch="${user.role} == 1">
                <div th:case="true">
                  <input type="radio"  name="role" checked="checked" value="1" title="管理员">
                  <input type="radio" name="role" value="2" title="普通用户">
                </div>

                <div th:case="false">
                  <input type="radio"  name="role"  value="1" title="管理员">
                  <input type="radio" name="role" checked="checked" value="2" title="普通用户">
                </div>

              </div>
            </div>




            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script src="/cms/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/cms/js/xadmin.js"></script>
<script>
  layui.use(['form', 'layedit','upload', 'laydate'], function(){
    var form = layui.form,
       layer = layui.layer;
    var $ = layui.$;
    var upload = layui.upload;
    var layedit = layui.layedit;
    layedit.set({	//设置图片接口
      uploadImage: {
        url: '/file/upload', //接口url
        type: 'post'
      }
    });


    //执行实例
    var uploadInst = upload.render({
      elem: '#test1' //绑定元素
      ,url: '/file/upload' //上传接口
      ,done: function(res){
        $("#headImg").val("");
        $("#headImg").val(res.data);
        layer.msg(res.msg);
      }
      ,error: function(){
        layer.msg("上传失败！")
      }
    });


    //监听提交
    form.on('submit(demo1)', function(data){
      // $.ajax({
      //   url: '/cms/user/update',
      //   type: 'POST',
      //   dataType: 'JSON',
      //   contentType: "application/json;charset=UTF-8",
      //   data: JSON.stringify(data.field),
      //   success: function (result) {
      //     if (result.code == 200) {
      //       layer.msg(result.msg);
      //       return false;
      //     } else {
      //       layer.msg(result.msg);
      //       return false;
      //     }
      //   }
      // })


      // 刷新
      $('#btn-refresh').on('click', function () {
        tableIns.reload()
      });
      return false;
    });



  });
</script>
</body>


</html>